<!---
  @author: andy
  @description: 内容展示组件
-->
<template>
  <div class="layout-content" :style="{...contentStyle}">
    <div class="layout-content-inner">
      <slot />
    </div>
  </div>
</template>
<script lang='ts' setup>
import { useConfigStore } from '@/stores/configs/config';
import { computed } from 'vue';
import { storeToRefs } from 'pinia';
import { useAccessStore } from '@/stores/access/access';
const accessStore = useAccessStore();
const configStore = useConfigStore();
const { config } = storeToRefs(configStore);
const contentStyle = computed(() => {
  if (config.value.app.layout === 'sidebar-nav' || config.value.app.layout === 'header-nav') {
    return configStore.layoutContentStyle
  } else {
    return configStore.isFullscreen ? { marginTop : `${(config.value.tabbar.enable ? config.value.tabbar.height : 0) + (config.value.secondMenu.enable && config.value.app.layout === 'mixed-nav' ? config.value.secondMenu.height : 0)}px` } : !config.value.tabbar.enable ? { marginTop : `${config.value.header.enable ? config.value.header.height : 0}px` } : accessStore.secondMenus.length > 0 ? configStore.layoutContentStyle : {marginTop : `${(configStore.config.header.enable ? configStore.config.header.height : 0) + (configStore.config.tabbar.enable ? configStore.config.tabbar.height : 0)}px`};
  }
});
</script>
<style lang='less' scoped>
.layout-content {
  width: 100%;
  flex: 1;
  position: relative;
  overflow: hidden;
  padding: 0.16rem;
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  .useTheme({
    color: text-color;
  });
  .layout-content-inner {
    height: 100%;
    width: 100%;
    position: relative;
    transition: all 0.3s;
    overflow: hidden;
  }
}
</style>